<template>
  <div class="loginDialog">
    <div class="loginMain animateded animate__slideInUp">
      <div class="titleDiv">
        <div class="ico">
          <open-data class="img" type="userAvatarUrl"></open-data>
        </div>
        <div class="title">欢迎来到卡片说说</div>
      </div>
      <div class="desc">为保存您的操作数据，卡片说说需要获取以下信息：</div>
      <div class="proc">•&nbsp;&nbsp;你的公开信息（昵称、头像等）</div>
      <div class="options">
        <div class="btn cancel" @tap="onClose">取消</div>
        <van-button
          open-type="getUserInfo"
          @getuserinfo="getUserInfo"
          style="width: 45%;"
          custom-style="display:block;font-size: 20px;width: 100%;padding: 10px 0;text-align: center; border-radius: 10px;background-color: #4fac31;color: #fff;"
          @click="login">
          确认
        </van-button>
      </div>
    </div>

  </div>
</template>

<script>
  import {getUserOpenId, showToast} from "../../api/wechat";
    import {API} from "../../api";

    export default {
      name: "LoginDialog",
      data(){
          return {

          }
      },
      methods:{
        onClose(){
          console.log('login onclose');
          this.$store.dispatch('showLoginDialog', false);
        },
        getUserData () {
          wx.getSetting({
            success: function (res) {
              console.log(res)
              if (res.authSetting['scope.userInfo'] === true) {
                wx.getUserInfo({
                  success: function (userData) {
                    console.log(userData)
                  }
                })
              } else {
                console.log('用户还未授权过')
              }
            }
          })
        },
        login () {
          //console.log('触发');
          // getUserOpenId(res => {
          //   console.log(res);
          // });
        },
        getUserInfo (e) {
          let _this = this;
          getUserOpenId(code => {
            //e.mp.detail.encryptedData,e.mp.detail.iv
            let params = e.mp.detail.userInfo;
            params.code = code;
            API.getOpenId(params).then( res => {
              if( res.code == 200 ){
                _this.$store.dispatch('userInfo', res.data);
                _this.$store.dispatch('isLogin', true);
                _this.$store.dispatch('refreshToken', res.data.token);
                _this.$store.dispatch('showLoginDialog', false);


              } else {
                showToast('登录出错，请稍后再试');
              }
              console.log(res);
            });
          });
        }
      },
      mounted() {

        //
        this.getUserData();
        //console.log("this.isLogin,LoginDialog",this.$store.state.isLogin);
        //this.$store.commit('setIsLogin',false);
        //console.log("this.isLogin,LoginDialog2",this.$store.state.isLogin);
      }
    }
</script>

<style scoped>
  .loginDialog{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
  }
  .loginDialog .loginMain{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
  }
  .loginDialog .loginMain .titleDiv{
    width: 90%;
    height: 60px;
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
  }
  .loginDialog .loginMain .titleDiv .ico{
    width: 55px;
    height: 55px;
    border-radius: 50%;
  }
  .loginDialog .loginMain .titleDiv .ico .img{
    display: block;
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 50%;
  }
  .loginDialog .loginMain .titleDiv .title{
    color: #1a1919;
    font-size: 24px;
    margin-left: 20px;
  }
  .loginDialog .loginMain .desc{
    width: 90%;
    color: #1a1919;
    font-size: 20px;
    margin: 0 auto;
  }
  .loginDialog .loginMain .proc{
    width: 90%;
    color: #999;
    font-size: 14px;
    margin: 20px auto;
  }
  .loginDialog .loginMain .options{
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
  }
  .loginDialog .loginMain .options .btn{
    font-size: 20px;
    width: 45%;
    padding: 10px 0;
    text-align: center;
    border-radius: 10px;
  }
  .loginDialog .loginMain .options .btn.cancel{
    background-color: #ededed;
    color: #aaaaaa;
  }
  .loginDialog .loginMain .options .btn.ok{
    background-color: #4fac31;
    color: #fff;
  }
  .animateded {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
</style>
